import React, {Component} from 'react';
import PropTypes from 'prop-types'
import {Grid,List} from 'antd-mobile'
class HeaderSelect extends Component {

    static propsTypes = {
        setHeader: PropTypes.func.isRequired
    }
    state = {
        icon: null
    }

    constructor(props) {
        super(props)
        this.headerList = []
        for (let i = 0; i < 20; i++) {
            this.headerList.push({
                text: i + 1,
                icon:require(`../../assets/images/${i+1}.png`)
            })

        }
    }
    selectHeader = ({icon ,text}) => {
        this.setState({icon});
        this.props.setHeader(text)
    }
    render() {
        let {icon} = this.state
        let gridHeader = icon ? <p>已选择头像:<img src={icon} alt='头像'/></p> : '请选择头像!'
        return (
            <div>
                <List renderHeader={() => gridHeader}>
                    <Grid data={this.headerList} columnNum={5} onClick={this.selectHeader} />
                </List>
            </div>
        );
    }
}

export default HeaderSelect;